<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
    <div ng-include="headerInclude"></div>   
    <div ng-controller="Apiman.AdminPluginsController" class="page container-pf-nav-pf-vertical container-fluid admin-page" data-field="page" ng-cloak="" ng-show="pageState == 'loaded'">
      <div class="row">
        <div class="col-md-12">
          <div ng-include="'plugins/api-manager/html/admin/admin_bc.include'"></div>
        </div>
      </div>
      <div class="row">
        <!-- Admin Content -->
        <div class="col-md-12 admin-content">
          <div class="container-fluid">
            <div class="row">
              <h2 class="title" data-field="heading" apiman-i18n-key="plugins">Plugins</h2>
            </div>
            <!-- Helpful hint -->
            <div class="row">
              <p class="col-md-10 apiman-label-faded" apiman-i18n-key="plugins-help-text" class="apiman-label-faded">Manage the plugins known to this installation of apiman.  Plugins allow additional functionality to be included in the system after it has been installed and configured.</p>
            </div>
            <!-- HR -->
            <div class="row hr-row">
              <hr/>
            </div>

            <div class="row">
              <ul class="nav nav-tabs">
                <li class="active"><a href="{{ pluginName }}/admin/plugins#installed-plugins" data-toggle="tab" role="tab" apiman-i18n-key="installed-plugins">Installed Plugins</a></li>
                <li><a href="{{ pluginName }}/admin/plugins#available-plugins" data-toggle="tab" role="tab" apiman-i18n-key="available-plugins">Available Plugins</a></li>
              </ul>
            </div>
            
            <div class="tab-content">
              <div id="installed-plugins" role="tabpanel" class="tab-pane fade active in">
                <!-- Table of Plugins -->
                <div class="row">
                  <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover">
                      <thead>
                        <tr>
                          <th apiman-i18n-key="name">Name</th>
                          <th apiman-i18n-key="description">Description</th>
                          <th apiman-i18n-key="version">Version</th>
                          <th apiman-i18n-key="actions">Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr ng-hide="plugins.length > 0">
                          <td colspan="4">
                            <div class="apiman-no-content container-fluid">
                              <div class="row">
                                <div class="col-md-12">
                                  <p class="apiman-no-entities-description" apiman-i18n-key="no-plugins-found">No plugins have been added! Try adding some plugins by clicking Add Plugin above.</p>
                                </div>
                              </div>
                            </div>
                          </td>
                        </tr>
                        <tr ng-repeat="plugin in plugins" ng-class="{apiman_deleting: plugin.deleting}">
                          <td><a href="{{ pluginName }}/admin/plugins/{{ plugin.id }}">{{ plugin.name }}</a></td>
                          <td><span>{{plugin.description}}</span></td>
                          <td nowrap="nowrap"><span>{{plugin.version}}</span></td>
                          <td nowrap="nowrap" valign="middle">
                            <div ng-show="!plugin.upgrading">
                              <button class="btn btn-default" ng-click="uninstallPlugin(plugin)" apiman-i18n-key="uninstall" title="Uninstall this plugin."><i class="fa fa-remove fa-fw"></i></button>
                              <button class="btn btn-default" ng-click="upgradePlugin(plugin)" ng-show="!plugin.hasAvailableVersion || plugin.canUpgrade" apiman-i18n-key="upgrade" title="Upgrade plugin to a newer version."><i class="fa fa-arrow-up fa-fw"></i></button>
                            </div>
                            <div ng-show="plugin.upgrading">
                              <p><span class="spinner spinner-xs spinner-inline"></span><span font-size="12px" apiman-i18n-key="upgrading">Upgrading...</span></p>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>

              <div id="available-plugins" role="tabpanel" class="tab-pane fade">
                <div class="row">
                  <div class="apiman-filters apiman-policyDefs-filters">
                    <div>
                      <apiman-search-box id="plugin-name-filter" apiman-i18n-key="filter-plugins" function="filterAvailablePlugins" placeholder="Filter by plugin name..." />
                    </div>
                    <a apiman-i18n-key="add-custom-plugin" href="{{ pluginName }}/new-plugin" class="btn btn-primary pull-right">Add Custom Plugin</a>
                  </div>
                </div>
                <!-- Table of Available Plugins -->
                <div class="row">
                  <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover">
                      <thead>
                        <tr>
                          <th apiman-i18n-key="name">Name</th>
                          <th apiman-i18n-key="description">Description</th>
                          <th apiman-i18n-key="actions">Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr ng-hide="availablePlugins.length > 0">
                          <td colspan="3">
                            <div class="apiman-no-content container-fluid">
                              <div class="row">
                                <div class="col-md-12">
                                  <p class="apiman-no-entities-description" apiman-i18n-key="no-available-plugins-found">No plugins found! Perhaps the plugin registry is not properly configured?</p>
                                </div>
                              </div>
                            </div>
                          </td>
                        </tr>
                        <tr ng-hide="filteredAvailablePlugins.length > 0 || availablePlugins.length == 0">
                          <td colspan="3">
                            <div class="apiman-no-content container-fluid">
                              <div class="row">
                                <div class="col-md-12">
                                  <p class="apiman-no-entities-description" apiman-i18n-key="no-available-plugins-found-filtered">No plugins match your filter criteria.</p>
                                </div>
                              </div>
                            </div>
                          </td>
                        </tr>
                        <tr ng-repeat="plugin in filteredAvailablePlugins">
                          <td>{{ plugin.name }}</td>
                          <td><span>{{plugin.description}}</span></td>
                          <td nowrap="nowrap">
                            <a ng-hide="plugin.isInstalled" href="{{ pluginName }}/new-plugin?groupId={{ plugin.groupId }}&amp;artifactId={{ plugin.artifactId }}&amp;version={{ plugin.version }}&amp;classifier={{ plugin.classifier }}&amp;type={{ plugin.type }}" apiman-i18n-key="install">Install</a>
                            <span class="apiman-label apiman-label-success" ng-hide="!plugin.isInstalled" apiman-i18n-key="installed">Installed</span>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div ng-include="'plugins/api-manager/html/modals/confirmModal.html'"></div>
      <div ng-include="'plugins/api-manager/html/modals/getValueModal.html'"></div>

    </div>
  </body>
</html>
